<template>
  <el-dialog
    class="nodeDialog custom-dialog"
    v-model="dialogVisible"
    width="500"
    :show-close='false'
    modal-class="dialog-center"
  >
  <div class="custom-dialog-header">
    <div class="title-box">
        <div class="title">{{$t('message.xmindMap.image')}}</div>
    </div>
    <svg class="close-icon" @click="cancel">
        <use xlink:href="#keowledge-danchuangguanbi1"></use>
    </svg>
  </div>
  <div class="img-body">
    <div class="title">{{$t('message.xmindMap.method1')}}</div>
    <ImgUpload
      ref="ImgUpload"
      v-model:value="img"
      style="margin-bottom: 12px;"
    ></ImgUpload>
    <div class="title">{{$t('message.xmindMap.method2')}}</div>
    <div class="inputBox">
      <span class="label">{{$t('message.xmindMap.enterImageAddress')}}</span>
      <el-input
        v-model="imgUrl"
        size="mini"
        placeholder="http://xxx.com/xx.jpg"
        @keydown.stop
      ></el-input>
    </div>
    <div class="title">{{$t('message.xmindMap.optional')}}</div>
    <div class="inputBox">
      <span class="label">{{$t('message.xmindMap.imgTitle')}}</span>
      <el-input v-model="imgTitle" size="mini" @keydown.stop></el-input>
    </div>
  </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">{{$t('message.buttons.cancal')}}</el-button>
        <el-button type="primary" @click="confirm">{{$t('message.buttons.submit')}}</el-button>
      </span>
    </template>
    
  </el-dialog>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance,
  onBeforeUnmount
} from 'vue' 
import type {ComponentInternalInstance} from 'vue'
const instance: any = getCurrentInstance() as ComponentInternalInstance;
const proxy: any = instance.proxy as any; // 访问 proxy 属性
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
import { useRouter } from "vue-router"
import ImgUpload from "@/components/ImgUpload/index.vue";
import { getImageSize, isMobile } from 'simple-mind-map/src/utils/index'
const router = useRouter();

const emit = defineEmits([""])
const props = defineProps({

})

const dialogVisible = ref(false)
const img= ref('')
const imgUrl = ref('')
const imgTitle = ref('')
const activeNodes = ref(null)

onMounted(()=>{
  proxy.$eventBus.$on('node_active', handleNodeActive)
  proxy.$eventBus.$on('showNodeImage', handleShowNodeImage)
})

onBeforeUnmount(()=>{
  proxy.$eventBus.$off('node_active', handleNodeActive)
  proxy.$eventBus.$off('showNodeImage', handleShowNodeImage)
})
function handleNodeActive(...args) {
  activeNodes.value = [...args[1]]
}
function handleShowNodeImage() {
  reset()
  if (activeNodes.value.length > 0) {
    let firstNode = activeNodes.value[0]
    let img = firstNode.getData('image') || ''
    if (img) {
      if (/^https?:\/\//.test(img)) {
        imgUrl.value = img
      } else {
        img.value = img
      }
    }
    imgTitle.value = firstNode.getData('imageTitle') || ''
  }
  dialogVisible.value = true
}
function cancel() {
  dialogVisible.value = false;
  reset()
}
function reset() {
  img.value = ''
  imgTitle.value = ''
  imgUrl.value = ''
}
async function confirm() {
  try {
    // 删除图片
    if (!img.value && !imgUrl.value) {
      cancel()
      activeNodes.value.forEach(node => {
        node.setImage(null)
      })
      return
    }
    let res = null
    let img = ''
    if (img.value) {
      img = img.value
      res = await this.$refs.ImgUpload.getSize()
    } else if (imgUrl.value) {
      img = imgUrl.value
      res = await getImageSize(img)
    }
    activeNodes.value.forEach(node => {
      node.setImage({
        url: img || 'none',
        title: imgTitle.value,
        width: res.width,
        height: res.height
      })
    })
    cancel()
  } catch (error) {
    console.log(error)
  }
}
</script>
<style lang="scss" scoped>
.nodeDialog {
  @include fontFamily;
  .img-body{
    padding: 20px 30px;
    .title {
      font-size: 18px;
      margin-bottom: 12px;
    }
  }
  .inputBox {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .label {
      width: 150px;
    }
  }
}
</style>